<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-date"></i> 个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>修改资料</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="form-box">
        <el-form :model="form" :rules="rules" ref="form" label-width="80px">
         
          <el-form-item label="头像" prop="name">
              <div class="user-avator">
              <img :src="form.avatar" >
             
              </div> 
              <div class="user-upload">
                
                <el-upload
                class="avatar-uploader"
                :action="Global.URLPATH.UPLOAD_IMG_URL"
                :with-credentials='true' 
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <el-button size="small" type="primary">修改头像</el-button>
              </el-upload>
              </div>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" type="text" class="sinput"  ></el-input>
          </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="form.sex">
                <el-radio label="男" ></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期" >
              <el-col :span="11">
                <el-form-item prop="birthday">
                  <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" 
                     value-format="yyyy-MM-dd"
                  style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" type="text" class="sinput" disabled="disabled" ></el-input>
           
          </el-form-item>

          <el-form-item label="所属科室" prop="phone">
            <el-input v-model="form.deptName" type="text" class="sinput" disabled="disabled" ></el-input>
          </el-form-item>

          <el-form-item label="所在机构" prop="phone">
            <el-input v-model="form.mechanismName" type="text" class="sinput" disabled="disabled" ></el-input>
           
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('form')">修改</el-button>

          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
  import bus from '../../common/bus';
  import md5 from 'js-md5';
  export default {
    data: function(){
     
      /**
       * 验证密码位数
       * @param rule
       * @param value
       * @param callback
       */
      var validatePass = (rule, value, callback) => {
        if (!/^[\u4e00-\u9fa5]{2,8}$/.test(value)) {
          callback(new Error('姓名必须为2~8位汉字'));
        } else {
          callback();
        }
      };


  
      return {
        form: {
          name:'',
          sex: '男',
          phone: '',
          birthday: '',
          address: '',
          avatar: '',
          deptName: '',
          mechanismName: '',
         
        },
        imageUrl: '',
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { validator: validatePass, trigger: 'blur' }
          ],
        }
      }
    },
    created(){
      const userMap = JSON.parse(sessionStorage.getItem("userMap"));
      
      this.form.avatar = userMap.avatar;
      this.form.name = userMap.name;
      if(userMap.gender != undefined && userMap.gender ==1){
          this.form.sex = "男";
      }
      if(userMap.gender != undefined && userMap.gender ==2){
          this.form.sex = "女";
      }

      if(userMap.birthday != undefined ){
          this.form.birthday = userMap.birthday;
      }

      if(userMap.phone != undefined ){
          this.form.phone = userMap.phone;
      }
      if(userMap.deptName != undefined ){
          this.form.deptName = userMap.deptName;
      }
      if(userMap.mechanismName != undefined ){
          this.form.mechanismName = userMap.mechanismName;
      }
      
      if(userMap.avatarFileName != undefined ){
         
        //  this.getUrl(userMap.avatarFileName,this);
        var that = this;
           this.HttpUtil.encryptGet(
            this,
            this.Global.URLPATH.GET_IMG_URL,
            {
            path:userMap.avatarFileName
            },
            function (data) { 
                that.form.avatar = data.data
            },
            function (data) {//访问失败
              that.$message.error(data.msg);
            });
      }
    
      
    },
    methods: {

      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updateUser();

          }

        });


      },
      updateUser(){
        var that = this;
        let userMap = JSON.parse(sessionStorage.getItem('userMap'))
      
        this.HttpUtil.encryptPut(
          this,
          this.Global.URLPATH.USER+userMap.id,
          {
            avatar :this.form.avatar,
            name :this.form.name,
            birthday :this.form.birthday,
            gender :this.form.sex == "男" ? 1 : 2,
            avatarFileName:this.form.avatarFileName == undefined ? null : this.form.avatarFileName
          },
          function (data) {
            if(data.status == 0){
              that.$message.success("修改成功");
             
              userMap.avatar =that.form.avatar
              userMap.name =that.form.name
              userMap.birthday =that.form.birthday
              userMap.gender =that.form.sex == "男" ? 1 : 2
              sessionStorage.setItem("userMap",JSON.stringify(userMap))
             
            }
          },
          function (data) {//访问失败
            that.$message.success(data.msg);
          });
      },
      handleAvatarSuccess(res, file) {
        if(res.data != undefined){
    
        this.form.avatar = res.data.url;
        this.form.avatarFileName = res.data.fileName;
        this.imageUrl = URL.createObjectURL(file.raw);
        }
      
      },
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        // const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        // if (!isLt2M) {
        //   this.$message.error('上传头像图片大小不能超过 2MB!');
        // }
        // return isJPG && isLt2M;
      }
    
    }
  }
</script>
<style>
	@import url("../../../assets/css/common.css");
  .password{
    width: 250px;
  }
  .user-upload{
    float: right;
    
  }
  .user-avator{
    float: left;
    padding-left: 30px;
    padding-bottom: 10px;
  }
  .user-avator img{
    display: block;
    width:120px;
    height:120px;
    border-radius: 50%;
  }
  .sinput{
      width: 240px;
  }
  .avatar-uploader .el-upload {
    border: 0px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
 
</style>
